<template>
  <div>
    <div id="backimg">

    </div>
    <div id="login_box">
      <div id="loginbelow">
        <b>极光康复云平台</b>
        <p>&nbsp;&nbsp;&nbsp;康复患者评估与治疗一体服务平台，康复患者一站式多领域联合治疗服务平台</p>
      </div>
      <div v-if="showLogin" id="login">
        <div id="login_title">
          <img src="../../public/images/极光图标.png" alt="极光"
            style="height: 25px;width: 25px;margin-bottom: -8px;margin-right: 5px;">
          极光康复云平台
          <p style="margin-left: -180px;margin-top: 30px; font-size: 15px;">账号登陆</p>
        </div>
        <div class="form" style="">
          <el-form :model="ruleForm" label-position="right" status-icon :rules="rules" ref="ruleForm" label-width="100px"
            class="demo-ruleForm">
            <el-form-item label="" prop="username">
              <el-input v-model="ruleForm.username" autocomplete="off" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
              <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="ruleForm.radio" @click.native="onRadioChange($event)">
                <el-radio :label="true">记住密码
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item style="margin-top: 40px ;margin-left: 0px;">
              <el-button style="width: 200px;" type="primary" @click="submitForm('ruleForm')">登陆</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="tegister">
          <p style="margin-bottom: 5px;">忘记密码</p>
          <u  @click="showLogin=!showLogin">没有账号?去注册</u>
        </div>
      </div>
      <div v-else id="login">
        <div id="login_title">
          <img src="../../public/images/极光图标.png" alt="极光"
            style="height: 25px;width: 25px;margin-bottom: -8px;margin-right: 5px;">
          极光康复云平台
          <p style="margin-left: -180px;margin-top: 30px; font-size: 15px;">账号注册</p>
        </div>
        <div class="form" style="">
          <el-form :model="ruleForm" label-position="right" status-icon :rules="rules" ref="ruleForm" label-width="100px"
            class="demo-ruleForm">
            <el-form-item label="" prop="username">
              <el-input v-model="ruleForm.username" autocomplete="off" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
              <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="" prop="tel">
              <el-input style="width: 130px;" type="tel" maxlength="11" v-model="ruleForm.tel" autocomplete="off" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item prop="key">
              <el-input style="width: 130px;" maxlength="4" v-model="ruleForm.key" autocomplete="off" placeholder="请输入验证码"></el-input>
            </el-form-item>
            <el-form-item style="margin-top: 0px ;margin-left: 25px;">
              <el-button style="width: 100px;position: absolute;right: 110px;top: 2px;" type="primary" @click="submitForm('ruleForm')">注册</el-button>
              <el-button style="width: 100px; position: absolute;right: -10px;top: 2px;" type="primary" @click="showLogin=!showLogin">返回登陆</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="tegister">
          <el-button>获取验证码</el-button>
        </div>
      </div>
    </div>

  </div>
</template>
<script lang="ts">
import userData from '../store/modules/people'
import { RouterLink } from "vue-router";
export default {
  name: "loginTo",
  data() {
    var validateusername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('账号不能为空'));
      } else {
        callback();
      }
    };
    var validatepassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空'));
      } else {
        callback();
      }
    };
    return {
      showLogin: true,
      ruleForm: {
        username: '',
        password: '',
        radio: false,
        tel:'',
        key:''
      },
      rules: {
        username: [
          { validator: validateusername, trigger: 'blur' }
        ],
        password: [
          { validator: validatepassword, trigger: 'blur' }
        ]
      },
      user_data: userData(),
    };
  },
  methods: {
    onRadioChange(e) {
      // console.log(e.target);
      if (e.target.tagName === "INPUT") {
        if (this.ruleForm.radio === false) {
          this.ruleForm.radio = true;
        } else {
          this.ruleForm.radio = false;
        }
      }
      // console.log(this.ruleForm.radio);
    },

    submitForm(formName) {

      this.$router.push('/');
      // const data = {
      //   account: this.ruleForm.username,
      //   password: this.ruleForm.password
      // }
      // this.$http.get('/user/login', { params: data }).then(res => {
      //   let resp = res.data;
      //   console.log(resp);
      //   if (resp.code == 1) {
      //     this.user_data.updaUserData(resp.data);
      //     console.log(this.user_data.id);
      //     this.$message({
      //       message: '登录成功',
      //       type: 'success'
      //     });
      //     this.$router.push('/');
      //   } else {
      //     this.$message({
      //       // message: resp.message,
      //       message: "账号或密码错误",
      //       type: 'error'
      //     });
      //   }
      // })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    toregister() {
      this.$router.push('/register')
    }
  }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active 在 Vue2.1.8+ 中自动应用 */ {
  opacity: 0;
}
.tegister {
  position: absolute;
  top: 196px;
  right: 10px;
  font-size: 13px;
}

.form {
  position: absolute;
  top: 90px;
  right: 50px;
  width: 300px;
}

#backimg {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-image: url("../../public/images/极光登录.png");
  /* background: #42b983; */
  position: absolute;
  top: 0px;
  left: 0px;
}

#login_box {
  height: 240px;
  width: 600px;
  position: absolute;
  top: 50%;
  margin-top: -100px;
  right: 10%;
  background: #203589;
  opacity: 95%;
  border-radius: 10px;
}

#loginbelow {
  position: absolute;
  color: #b5bcd8;
  top: 25%;
  width: 200px;
  text-align: center;
  left: 4%
}

#loginbelow b {
  font-size: 15px;
  font-family: "站酷小薇LOGO体 常规", 站酷小薇LOGO体, sans-serif;
  font-weight: 700;
  font-style: normal;
}

#loginbelow p {
  font-family: 楷体, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  text-align: justify;
  margin-top: 10px;
}

#login {
  height: 340px;
  width: 300px;
  background: #fff;
  position: relative;
  margin-top: -60px;
  left: 40%;
  border-radius: 10px;
}

#login_title {
  position: absolute;
  top: 10px;
  left: 70px;
  font-family: 'Times New Roman', Times, serif;
  font-size: 18px;
  font-weight: bold;

}
</style>